<h1>Voice Memos</h1>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <title>title</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <style type="text/css">
      /**
       * Start writing your CSS here inside this style block, after the comments end.
       * If you get stuck and want to see how we did an example,
       * look at the file "css-exercise-finished.html" in this directory.
       *
       * Use http://go/css for reference.
       * 
       * Getting Started Tasks:
       * 1. Make all of the the list items render horizontal
       *
       * 2. Make the second list's list items render vertically
       *      - Hint: li li {}
       *
       * 3. Hide the second list
       *      - If you have time later, you can try to make it reappear 
       *          - Hints: ul ul {} and li:hover ul {}
       *
       * 4. Add padding, margin, and background-color as needed.
       *
       */
       

  
       
       #wd-navbar {
         position: absolute;
         top: 50;
         left: 0;
         border-bottom: 2px solid black;
         background: #eee;
       }
       #wd-navbar li {
        float: left;
        }
        #wd-navbar ul {
          list-style: none;
          padding: 0;
          margin: 0;
        }
        #wd-navbar li li {
          float: none;
        }
        #wd-navbar ul ul {
          visibility: hidden;
          position: absolute;
        }
        #wd-navbar li:hover ul {
          visibility: visible;
          background: #eee;
        }
        #wd-navbar a {
          display: block;
          padding: 5px;
          border: 1px solid #eee;
          color: green;
        }
        #wd-navbar a:hover {
          background: black;
        }
          
        
       
    </style>
  </head>
  <body>
    <div id="wd-navbar">
      <ul>
        <li>
          <a href="/">Home</a>
        </li>
        <li>
          <a href="/products">About</a>
        </li>
        <li>
          <a href="/products">Directions</a>
        </li>
        <li>
          <a href="/services">Future Possibilities</a>
        </li>
        <li>
          <a href="/contact">Contact</a>
          <ul>
            <li>
              <a href="/contact/advertising" class="first">Laura</a>
            </li>
            <li>
              <a href="/contact/marketing">Alicia</a>
            </li>
            </ul>
          </ul>
        </li>
      </ul>
    </div>
  </body>
</html>
